<script lang="ts" setup>
import { onMounted, reactive, watch } from 'vue'
import { changeRoute, routeConst } from '../../../router'
  import { useRoute } from 'vue-router'
import { appState } from '../../../common/manager/appManager'
import { hasOwnProp } from '../../../common/utils/normalUtils'

  const route = useRoute()

  const state:any = reactive({
    source: []
  })

  const itemClickHandler = (item:any) => {
    changeRoute(item.path)
  }

  const initNavSource = (currentPath:string) => {
    const arr = currentPath.split('/')
    let pathUp = '/'
    const routes = []
    for (const path of arr) {
      pathUp += '/' + path
      if (pathUp !== appState.defaultRoute && hasOwnProp(appState.menuMap, pathUp)) {
        const route = appState.menuMap[pathUp]
        routes.push({ name: route.title, icon: route.icon, path: route.path })
      }
    }
    routes.unshift({ name: '主页', path: appState.defaultRoute })
    state.source = routes
  }

  watch(() => route.path, (val:string) => {
    initNavSource(val)
  })

  onMounted(() => {
    initNavSource(route.path)
  })

</script>

<template>
  <div class="nav-path-menu">
    <v-icon icon="home" />
    <el-breadcrumb>
      <el-breadcrumb-item v-for="item of state.source" @click="itemClickHandler(item)">
        {{ item.name }}
      </el-breadcrumb-item>
    </el-breadcrumb>
  </div>
</template>

<style scoped lang="scss">
  .nav-path-menu{
    @include hor-group();
    padding: 0 20px;
    flex:none;
    width:100%;
    background: var(--w-bg-box);
    box-sizing: border-box;
  }
</style>
